import React, { FC, useEffect } from 'react'
import {inject,observer} from 'mobx-react'
import { useNavigate } from 'react-router-dom'
import { Avatar, Tag } from 'antd'
import { baseURL } from '../../../../api/request'
import './index.scss'
import { vipList } from '../../../../utils'
import {
    DingtalkOutlined
  } from '@ant-design/icons';
import moment from 'moment'  //时间过滤器
 const  AnnoList:FC<any>=({
     anno
 })=> {
    const {annoList,getAnnoList,changeanno}=anno
    const navigate = useNavigate()
 
    useEffect(()=>{
     getAnnoList()     
   },[])
    //点击查看，携带——id进入详情页
  const gotoDetailed=(item:any)=>{
    navigate('/detailed/annoDetailed/'+item._id)
  }
  return (
    <div>
        {
            annoList&&annoList.map((item: any,index: any)=>(
                <div key={index} style={{background:"#fff",marginBottom:"0.05rem"}} 
                onClick={()=>gotoDetailed(item)}
                >
                   <div className='userList' key={index} style={{padding:"0 0.1rem",width:"100%",height:"0.5rem"}}>
                    <div className='touxiang' style={{height:"100%",width:"0.5rem",display:"flex",alignItems:"center"}}>
                        {
                            item.info.avatar?<Avatar style={{width:"0.4rem",height:"0.4rem"}} src={item.info.avatar.replace(/public/,baseURL)} />:<Avatar src={require('../../../../assets/images/xiaoxin_2.jpg')}></Avatar>
                        }
                        </div>
                    <div 
                    style={{width:"100%",height:"100%"}}
                    >
                    <p style={{margin:0,padding:"0.05rem 0.1rem 0 0",display:"flex",justifyContent:"space-between"}}>{item.info.username} <Tag icon={<DingtalkOutlined />} color={vipList.find(v=>v.value==item.info.role)?.color}>
                    {vipList.find(v=>v.value==item.info.role)?.label}
                    </Tag></p>
                    <p style={{margin:0}}>
                    {item.phone}
                    </p>
                    </div>
                   </div>
                   <div style={{padding:"0 0.1rem",display:"flex",justifyContent:"space-between"}}>
                       <h3 style={{fontWeight:700,fontSize:"0.18rem",width:"2rem",overflow:"hidden",height:"0.25rem",lineHeight:"0.25rem",whiteSpace:"nowrap",textOverflow:"ellipsis"}}>{item.title}</h3>
                       <span style={{fontSize:"0.12rem"}}>{moment(item.time).format("YYYY-MM-DD HH:mm")}</span>
                   </div>
                </div>
            ))
        }
    </div>
  )
}
export default inject('anno')(observer(AnnoList))
